<template>
  <div class="classify">
    <div class="warp">
      <van-tabs
        animated
        color="white"
        title-active-color="#64C8C8"
        title-inactive-color="#999999"
        :border="true"
        @click="onClick"
      >
        <van-tab v-for="items in listname" :title="items.id" :key="items">
          <!-- 商品列表 -->
            <div class="shopwarp">
              <div class="shopping" v-for="item in meizhuangList" :key="item" @click="toDetail">
                <van-card
                  :desc="item.yingwen"
                  :title="item.title"
                  :thumb="'http://www.luhuaji.top:3000' + item.url"
                >
                  <template #tags>
                    <div>
                      <span class="dengji"> {{ item.pingfen }} </span>
                      <!-- <img :src="'http://www.luhuaji.top:3000' + item.starurl" alt=""> -->
                      <img src="../../../assets/images/hjj-image/评分星星.png" alt="">
                      <span>( {{ item.pingfenrenshu }} 评分)</span>
                    </div>
                    <div class="price">
                      <i>{{ item.country }} · ￥ {{ item.zhong }}</i>
                    </div>
                  </template>
                </van-card>
              </div>              
            </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { reactive } from "vue";
import BScroll from '@better-scroll/core';
import { getMeizhuangApi } from "../../../utils/home-api";
export default {
  setup() {
    let {listname} = list()
    function list() {
      const listname = reactive([
        {
          id:"上升榜",
        },
        {
          id:"卸妆",
        },
        {
          id:"妆前",
        },
        {
          id:"粉底",
        },
        {
          id:"口红",
        },
      ]);
      return {
        listname,
      };
    }
    return {
      listname,
    }
  },
  data() {
    return {
      meizhuangList:[],
      number: "1",
    };
  },
  mounted(){
    //请求数据
    this.getMeizhuang();
  },
  methods: {
    onClick(index) {//点击得到分类页面的index值
      this.number = (index + 1).toString();
      // console.log(this.number);
      this.getMeizhuang({ type: this.number });
      // console.log(index);
    },
    async getMeizhuang() {
      const res = await getMeizhuangApi({ type: this.number});
      // console.log(res);
      this.meizhuangList = res.result;
      // console.log(res.result);
      await this.$nextTick();
      new BScroll('.warp', {
        scrollX: false,
        scrollY: true,
        click: true,
      });
    },
    toDetail() {
      //跳转到详情页
      this.$router.push("/detail");
    }
  }, 
}
</script>
<style lang="less" scoped>
//分类页面
.classify {
  margin-top: 45px;
  border-bottom: 1px solid #f1f1f1;
  border-top: 1px solid #f1f1f1;
}
:deep(.van-tab) {
  font-weight: 900;
}
:deep(.van-card__title) {
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
}
:deep(.van-card__desc) {
  color: #959595;
  font-size: 11px;
}

//商品列表页
.warp {
  width: 100%;
  height: 510px;
}
.shopwarp {
  width: 100%;
}
.van-card {
  border-top: 1px solid #f1f1f1;
  background: white;
}
.shopping img {
  width: 70px;
  height: 11px;
  margin: 0 10px;
}
span {
  line-height: 18px;
  font-size: 14px;
}
.dengji {
  color: #68dcdc;
  font-weight: 900;
}
.price {
  line-height: 24px;
  i {
    color: #999999;
    font-size: 10px;
  }
}
</style>